import styles from './index.less'
import {Carousel, Space, Typography} from '@douyinfe/semi-ui';
import {history} from 'umi';
import VideoItems from '@/components/video-items'
import React from "react";
import categoryAPI from '@/api/model/category';
import BannerAPI from '@/api/model/banner';
import videoAPI from '@/api/model/video';
import Loading from '@/components/loading';

export default class HomePage extends React.Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            // @ts-ignore
            loading: true,
            loadingBanner: false,
            classData: [],
            bannerList: [],
            videoList: []
        }
        this.getData = this.getData.bind(this)
    }

    componentDidMount() {
        // 重置滚动条
        // window.scrollTo(0, 0);
        this.getData()
    }

    // 获取数据
    async getData() {
        const CategorySelect = await categoryAPI.CategorySelect();
        const bannerList = await BannerAPI.bannerList();
        const VideoList = await videoAPI.VideoList();
        this.setState({
            classData: CategorySelect.data,
            bannerList: bannerList.data,
            videoList: VideoList.data,
            loadingBanner: true,
            loading:false
        });
    }

    // 跳转分类详情
    goPrvideoItem = (t: any, name: string) => {
        window.sessionStorage.setItem('category', String(t))
        window.sessionStorage.setItem('categoryName', name)
        history.push(`/prvideo-item`)
    }

    // 跳转视频详情
    // @ts-ignore
    goVideoDetail({videoId}) {
        console.log(videoId)
        window.sessionStorage.setItem('videoId', videoId)
        history.push(`/prvideo-detail`)
    }

    render() {
        const renderLogo = () => {
            return (
                <img
                    src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/semi_logo.svg'
                    alt='semi_logo' style={{width: 87, height: 31}}/>
            );
        };

        const colorStyle = {
            color: '#1C1F23'
        };
        const {classData, bannerList, loadingBanner, videoList, loading}: any = this.state;
        const {Title, Paragraph} = Typography;

        return(
            <>
                {
                    loading ? <Loading/>
                        :
                        <div className={styles.home_container}>
                            <div>
                                <div className={[styles.recommend_container, 'container'].join(' ')}>
                                    {
                                        loadingBanner ?
                                            <Carousel style={{
                                                width: '100%',
                                                height: '100%',
                                            }} indicatorType='columnar' indicatorPosition='left' indicatorSize='small'
                                                      theme='dark'
                                                      arrowType='hover' autoPlay={{interval: 3000, hoverToPause: true}}>
                                                {
                                                    bannerList.map((t: any) => {
                                                        return (
                                                            <div key={t.id}
                                                                 onClick={() => this.goVideoDetail(t)}
                                                                 style={{
                                                                     cursor: 'pointer',
                                                                     backgroundSize: 'cover',
                                                                     backgroundImage: `url(${t.bannerImage})`
                                                                 }}>
                                                                <Space vertical align='start' spacing='medium'
                                                                       className={styles.spaceStyle}>
                                                                    {/*{renderLogo()}*/}
                                                                    {/*<Title heading={2} style={colorStyle}>{t.bannerTitle}</Title>*/}
                                                                    <Space vertical align='start'>
                                                                        {/*<Paragraph style={colorStyle}>{t.bannerDescribe}</Paragraph>*/}
                                                                    </Space>
                                                                </Space>
                                                            </div>
                                                        );
                                                    })
                                                }
                                            </Carousel>
                                            : ''
                                    }
                                </div>
                                {/*<CarouselComponent bannerList={bannerList}/>*/}
                            </div>
                            <div className={[styles.class_container, 'container'].join(' ')}>
                                {
                                    classData.map((t: any) => {
                                        return (
                                            // @ts-ignore
                                            <div onClick={() => this.goPrvideoItem(t.id, t.name)} key={t.id}
                                                 className={styles.class_item}>
                                                {t.name}
                                            </div>
                                        )
                                    })
                                }
                            </div>
                            <div style={{height: '100%'}} className={[styles.content_container, 'container'].join(' ')}>
                                <VideoItems videoList={videoList}/>
                            </div>
                        </div>
                }

            </>
        )


    }
}
